<template>
  <view>
    <view class="search-wall_H" :style="{ paddingTop: safeArea.top + 'px' }"></view>
    <view class="search-wall">
      <mineNavbar :styleData="styleData"> </mineNavbar>
      <view class="c_search">
        <view class="middle">
          <input type="text" confirm-type="search" v-model="form.positionName" @confirm="schearchFn" placeholder="查找岗位" />
        </view>
        <view class="right" @click="schearchFn">
          <image src="@/static/images/recruit/search.png" />
        </view>
      </view>
      <view class="tabNav">
        <view class="tabList">
          <view v-for="item in tabList" :key="item.value" class="tabBtn tabItem"
            :class="{ active: item.value === form.shelfStatus }" @click="tabChange(item.value)">{{ item.name }}</view>
        </view>
        <navigator :url="'/subPage/enterprise/post/postForm'" class="tabBtn">添加岗位</navigator>
      </view>
    </view>

    <scroll-view scroll-y class="scroll-main" @scrolltolower="scrollBottomFn">
      <!-- 列表 -->
      <view class="post-list">
        <view class="post-item" v-for="item in list" :key="item.positionId">
          <view class="pTitle">
            <text class="pTag">{{ item.positionTypeLabel }}</text>
            <text>{{ item.positionName }}</text>
          </view>
          <view class="pTime">
            <view class="p-time">{{ item.shelfTime || "--" }}</view>
            <view class="p-price">¥ <text class="orange">{{ item.startSalary }}</text>
              <text v-if="item.positionType !== '1'">-</text>
              <text v-if="item.positionType !== '1'" class="orange">{{ item.endSalary }}</text>
              /{{ item.salaryPeriodLabel || '--' }}
            </view>
          </view>
          <view class="num-row">
            <view class="num-col">
              <view class="num-p">{{ item.recruitmentCount }}</view>
              <view>招聘人数</view>
            </view>
            <view class="num-col">
              <view class="num-p">{{ item.applyCount || 0 }}</view>
              <view>申请人数</view>
            </view>
            <view class="num-col">
              <view class="num-p">{{ item.employCount || 0 }}</view>
              <view>已录用人数</view>
            </view>
          </view>
          <view class="item-foot">
            <view class="status-p" @click="selectTalant(item)">
              筛选人才
            </view>
            <div style="display: flex;">
              <view class="pBtn" @click="changeStatus(item.positionId)">{{
                form.shelfStatus == "1" ? "暂停" : "启用"
              }}</view>
              <navigator :url="`/subPage/enterprise/post/postForm?id=${item.positionId}`" class="pBtn">编辑</navigator>
              <navigator :url="`/subPage/enterprise/post/details?id=${item.positionId}`" class="pBtn">查看申请</navigator>
            </div>
          </view>
        </view>
      </view>

      <uni-load-more :status="loading" />
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { getPositionInfoList, exitState } from "@/api/subPage/post.js";
export default {
  // components: {},
  data() {
    return {
      styleData: {
        tabbarText: "岗位",
        show: true,
      },
      list: [],
      pages: 1, //当前分页总页数
      loading: "more", //加载状态
      form: {
        pageSize: 10, //pageSize 每页大小
        pageNum: 1, // pageNum 页数
        positionName: "", // 岗位名称
        shelfStatus: "1", // 招聘状态（0=待启用，1=招聘中）
      },
      tabList: [
        { value: "1", name: "招聘中" },
        { value: "0", name: "待启用" },
      ],
    };
  },
  computed: {
    ...mapState(["safeArea"]),
  },
  created() {
    // this.getListFn();
  },
  mounted() { },
  methods: {
    // 暂停启用
    changeStatus(positionId) {
      // 招聘状态（0=暂停，1=启用）
      let shelfStatus = this.form.shelfStatus == "1" ? "0" : "1";
      exitState({
        positionId,
        shelfStatus
      }).then(res => {
        uni.showToast({
          title: shelfStatus == '1' ? '启用成功' : '已暂停',
          duration: 2000
        });
        this.pages = 1;
        this.getListFn(1)
      })

    },
    // 搜索
    schearchFn() {
      this.pages = 1;
      this.getListFn(1);
    },
    // 切换tab栏
    tabChange(value) {
      console.log(value);
      this.form.shelfStatus = value;
      this.pages = 1;
      this.getListFn(1);
    },
    // 获取列表
    getListFn(current) {
      let pages = this.pages;
      if (current && current > pages) {
        return true;
      }
      let pageNum = current ? current : 1;
      this.loading = pageNum <= pages ? "loading" : "noMore";
      getPositionInfoList(this.form)
        .then((res) => {
          let records = res.rows ? res.rows : [];
          let newList = pageNum === 1 ? records : [...this.list, ...records];
          this.form.pageNum = pageNum;
          let newPages = Math.floor(res.total / this.form.pageSize);
          this.pages = newPages;
          this.loading = pageNum < newPages ? "more" : "noMore";
          this.list = newList;
          // console.log(this.list);
        })
        .catch((e) => {
          this.loading = "noMore";
        });
    },
    // 筛选人才
    selectTalant(item) {
      console.log(item.industryId);
      uni.setStorageSync('talantIndustryId', item.industryId)
      uni.switchTab({
        url:'/pages/tabbarChange/sencondPage/index'
      })
    },

    // 监听滑动到底部
    scrollBottomFn() {
      let pageNum = this.form.pageNum;
      if (pageNum < this.pages) {
        this.getListFn(pageNum + 1);
      }
    },

    // handToPath() {
    //   const positionId = "1777633460920086530";
    //   uni.navigateTo({
    //     url: "/pages/recruit/post/postDetail/index?positionId=" + positionId,
    //   });
    // },

    toPath(item) {
      uni.navigateTo({
        url: item,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-wall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 10;
}

.search-wall_H {
  height: 325rpx; // 114+100+80
}

.scroll-main {
  height: calc(100vh - 280rpx);
  box-sizing: border-box;
  padding: 0 0 30rpx;
}

.c_search {
  // width: 700rpx;
  height: 72rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  margin: 22rpx 24rpx 20rpx;
  position: relative;

  .middle {
    width: 69%;
    margin-left: 20px;
  }

  .right {
    width: 10%;

    image {
      width: 14px;
      height: 14px;
    }
  }

  .iconfont {
    transform: rotate(-90deg);
    font-size: 10px;
    color: #ccc;
  }
}

.tabNav {
  width: 100%;
  height: 100rpx;
  padding: 22rpx 24rpx;
  display: flex;
  background: #f8f8f8;
  box-sizing: border-box;

  .tabList {
    display: flex;
    flex: 1;
  }

  .tabBtn {
    min-width: 140rpx;
    height: 56rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
    background: #000000;
    border-radius: 44rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: block;

    &.tabItem {
      color: #000000;
      background: rgba(216, 216, 216, 0.36);
      margin-right: 16rpx;

      &.active {
        color: #ffffff;
        background: #ff9e24;
      }
    }
  }
}

.post-list {
  .post-item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 26rpx 24rpx 22rpx;
    margin: 0 24rpx 16rpx;
    box-sizing: border-box;

    .pTitle {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;

      .pTag {
        font-size: 22rpx;
        color: #ffffff;
        height: 40rpx;
        line-height: 40rpx;
        background: #34a1ff;
        border-radius: 6rpx;
        padding: 0 14rpx;
        margin-right: 12rpx;
      }
    }

    .pTime {
      display: flex;
      padding: 18rpx 0 30rpx;

      .p-time {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.45);
        line-height: 46rpx;
        flex: 1;
        font-weight: 500;
      }

      .p-price {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.64);
        line-height: 46rpx;
        font-weight: 500;

        .orange {
          font-size: 32rpx;
          color: #ff9e24;
        }
      }
    }

    .num-row {
      height: 136rpx;
      font-size: 24rpx;
      line-height: 34rpx;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
      background: rgba(216, 216, 216, 0.16);
      border-radius: 8rpx;
      display: flex;
      padding-top: 22rpx;
      box-sizing: border-box;

      .num-col {
        flex: 1;

        .num-p {
          height: 50rpx;
          font-size: 36rpx;
          line-height: 50rpx;
          color: rgba(0, 0, 0, 0.88);
        }
      }
    }

    .item-foot {
      display: flex;
      margin-top: 24rpx;
      justify-content: space-between;

      .status-p {
        font-size: 24rpx;
        line-height: 64rpx;
        color: #fff;
        font-weight: 500;
        height: 64rpx;
        width: 150rpx;
        background: #317ed0;
        border-radius: 64rpx;
        text-align: center;
      }

      .pBtn {
        min-width: 120rpx;
        height: 64rpx;
        font-size: 24rpx;
        color: #000000;
        line-height: 62rpx;
        text-align: center;
        border: 1rpx solid rgba(0, 0, 0, 0.12);
        border-radius: 44rpx;
        padding: 0 32rpx;
        margin-left: 12rpx;
        box-sizing: border-box;
      }
    }
  }
}
</style>
